<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .promo {
            width: 100%;
            height: 630px;
            border-top: 1px solid #c4c7cb;
            background: url(http://www.digitalhands.net/images/header_bg_back.jpg) no-repeat top center;
        }
        #parallax {
            position: relative;
            margin: 0 auto;
            overflow: hidden;
            height: 630px;
            width: 100%;
            background: url(http://www.digitalhands.net/images/header_bg.jpg) no-repeat center top !important;
        }
        #parallax .bg1 {
            width: 1602px;
            height: 603px;
            background: url(http://www.digitalhands.net/images/drops_bg_up.png) no-repeat 0 0;
        }
        #parallax .bg2 {
            width: 1602px;
            height: 603px;
            background: url(http://www.digitalhands.net/images/drops_bg_back.png) no-repeat 0 0;
        }
        #parallax .sloganBox {
            width: 1200px;
            position: absolute;
            left: 50%;
            height: 630px;
            margin-left: -600px;
        }
        #parallax .slogan1 {
            width: 1002px;
            height: 410px;
            background: url(http://www.digitalhands.net/images/text_yonlendiriyoruz_bg.png) no-repeat left 50px;
        }
        #parallax .slogan2 {
            width: 1120px;
            height: 450px;
            background: url(http://www.digitalhands.net/images/text_uretiyoruz_bg.png) no-repeat right top;
        }
        #parallax .slogan3 {
            width: 1102px;
            height: 500px;
            background: url(http://www.digitalhands.net/images/text_vesonra_bg.png) no-repeat right bottom;
        }
        .parallax-viewport {
            position: relative;
            overflow: hidden;
        }
        .parallax-layer {
            position: absolute;
        }
        /*.promoSlogan {*/
            /*float: left;*/
            /*position: relative;*/
            /*width: 960px;*/
            /*position: relative;*/
            /*color: #8a8a8a;*/
            /*margin: 0 auto;*/
            /*margin-top: 50px;*/
            /*padding-top: 7px;*/
            /*background-image: url(http://www.digitalhands.net/images/promo_blockquote_bg.gif), url(http://www.digitalhands.net/images/promo_blockquote_bg_2.gif);*/
            /*background-position: left center, right center;*/
            /*background-repeat: no-repeat;*/
        /*}*/
        /*.promoSlogan p {*/
            /*font-size: 21px;*/
            /*line-height: 30px;*/
            /*color: #8a8a8a;*/
            /*text-align: left;*/
            /*font-family: 'FuturaStdLightTrRegular';*/
            /*margin-left: 42px;*/
        /*}*/
        /*.promoSlogan p em {*/
            /*font-family: 'FuturaStdBookTrRegular';*/
            /*font-style: normal;*/
        /*}*/
    </style>
</head>
<body>
<script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery1.8.1.js"></script>
<script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery.jparallax.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#parallax .parallax-layer").parallax({}, {
            // xparallax: "60%",   //这里是插件的所有参数，大家可以一个个试试了解他们每一个的作用
            // yparallax: true,
            // height: 630,
            // calibrateX: false,
            //  calibrateY: true,
            //  invertX: false,
            //  invertY: true,
            //  limitX: false,
            //  limitY: 10,
            //  scalarX: 2,
            //  scalarY: 8,
            //  frictionX: 0.2,
            //  frictionY: 0.8,
            //  originX: 0.0,
            //  originY: 1.0
        });
    });
</script>

<!-- Top Promo -->
<div class="promo">

    <div id="parallax" class="port parallax-viewport">
        <div class="bg1 parallax-layer"></div>
        <div class="bg2 parallax-layer"></div>
        <div class="sloganBox">
            <div class="slogan1 parallax-layer"></div>
            <div class="slogan2 parallax-layer"></div>
            <div class="slogan3 parallax-layer"></div>
        </div>
    </div>

</div>
<!-- //Top Promo -->
</body>
</html>